<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jstl/core" template="/_templates/admin.jsp">
	<ui:define name="windowTitle">Create News</ui:define>
	<ui:define name="pageTitle">Create News</ui:define>
	<ui:define name="bodyEndScript">
		<script>
			function toggleDate(_useCurrentDate) {
				// NOTE
				// &lt; had to be used to generate an actual LESS THAN side on the client side
				for(i=0; i &lt; document.forms.length; i++) {
					if(document.forms[i].name == "CreateNewsForm") {
						for(j=0; j &lt; document.forms[i].elements.length; j++) {
							if(document.forms[i].elements[j].name == "date") {
								document.forms[i].elements[j].disabled = (_useCurrentDate.checked);
								document.forms[i].elements[j].value = "";
								break;
							}
						}
						
						break;
					}
				}
			}
			
			function toggleCategory(_category) {
				var i,j=0;
				
				// NOTE
				// &lt; had to be used to generate an actual LESS THAN side on the client side
				for(i=0; i &lt; document.forms.length; i++) {
					if(document.forms[i].name == "CreateNewsForm") {
						for(j=0; j &lt; document.forms[i].elements.length; j++) {
							if(document.forms[i].elements[j].name == "subCategory") {
								// execute ajax to update the drop down
								executeAjax("#{request.contextPath}/_ajax/admin/snippets/subCategoryOptions.jsf?category=" +_category, "GET", document.forms[i].elements[j], "outerHTML");
								break;
							}
						}
						
						break;
					}
				}
			}
			
			function togglePhotoAlbums(_albumId) {
				var i,j=0;
				
				// NOTE
				// &lt; had to be used to generate an actual LESS THAN side on the client side
				for(i=0; i &lt; document.forms.length; i++) {
					if(document.forms[i].name == "CreateNewsForm") {
						for(j=0; j &lt; document.forms[i].elements.length; j++) {
							if(document.forms[i].elements[j].name == "photoId") {
								// execute ajax to update the drop down
								executeAjax("#{request.contextPath}/_ajax/admin/snippets/photoOptions.jsf?albumId=" +_albumId, "GET", document.forms[i].elements[j], "outerHTML");
								break;
							}
						}
						
						break;
					}
				}
			}
		</script>
	</ui:define>
	
	<ui:define name="mainContent">
		<tr>
			<td class="ContentSection">
				<form name="CreateNewsForm" action="#{request.contextPath}/_pages/admin/news/execute.jsf" method="post">
					<input type="hidden" name="action" value="C" />
					
					<table>
						<tr>
							<td>Title</td>
							<td><input type="text" name="title" /></td>
						</tr>
						
						<tr>
							<td>Description</td>
							<td><input type="text" name="description" /></td>
						</tr>
						
						<tr>
							<td>Date</td>
							<td><input type="text" name="date" disabled="disabled" /> - <input type="checkbox" name="useCurrentDate" value="true" checked="checked" onchange="toggleDate(this);" /> Use Current</td>
						</tr>
						
						<tr>
							<td>Importance</td>
							<td>
								<select name="importance">
									<option value="1">Low</option>
									<option value="2">- 2 -</option>
									<option value="3">- 3- </option>
									<option value="4">Hot</option>
									<option value="5">Breaking News</option>
								</select>
							</td>
						</tr>
						
						<tr>
							<td>Category</td>
							<td>
								<select name="category" onchange="toggleCategory(this.value);">
									<option value="-">- SELECT -</option>
									<option value="business">Business</option>
									<option value="education">Education</option>
									<option value="entertainment">Entertainment</option>
									<option value="health">Health</option>
									<option value="local">Local</option>
									<option value="national">National</option>
									<option value="politics">Politics</option>
									<option value="sports">Sports</option>
									<option value="technology">Technology</option>
								</select>
							</td>
						</tr>
						
						<tr>
							<td>Sub-Category</td>
							<td>
								<select name="subCategory"></select>
							</td>
						</tr>
						
						<tr>
							<td>Author</td>
							<td>
								<select name="authorId">
									<option value="-">- SELECT -</option>
									<h:outputText value="#{newsManagedBean.authorsDropDown}" escape="false" />
								</select>
							</td>
						</tr>
						
						<tr>
							<td>Album</td>
							<td>
								<select name="albumId" onchange="togglePhotoAlbums(this.value);">
									<option value="-">- SELECT -</option>
									<h:outputText value="#{newsManagedBean.photoAlbumsDropDown}" escape="false" />
								</select>
							</td>
						</tr>
						
						<tr>
							<td>Photo</td>
							<td>
								<!-- generated based on the photo album -->
								<select name="photoId"></select>
							</td>
						</tr>
						
						<tr>
							<td>Content</td>
							<td><textarea name="content">...</textarea></td>
						</tr>
						
						<tr>
							<td colspan="2" style="text-align:right;">
								<input type="submit" value="Create News Article" />
							</td>
						</tr>
					</table>
				</form>
			</td>
		</tr>
	</ui:define>
</ui:composition>